// React的事件命名方式采用小驼峰（handlClick, getUser...）
// 使用JSX语法时，事件绑定是传入一个函数作为事件处理函数，而不是字符串

// 1.0 事件绑定
<div>
<div onClick='getUser'>HTML点击事件</div>  // html事件绑定
<div onClick= { handlClick }>JSX点击事件</div>  // JSX事件绑定
</div>

// 2.0 事件阻止默认行为
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('e', e);
    console.log("This link was clicked.");
  }
  return (
    <a href="#" onClick={handleClick}>
      click me!
    </a>
  );
}
ReactDOM.render(<ActionLink />, document.getElementById("root"));

// 3.0 class组件的事件处理
class Toggle extends React.Component {
  constructor(props) {  // 构造函数
    super(props)
    this.state = {
      toggleBoolean: false
    }
    this.chanageToggle = this.chanageToggle.bind(this)  // 在事件中使用this
  }
  chanageToggle() {
    this.setState((state) => {  // 点击切换开关
      return {
        toggleBoolean: !state.toggleBoolean
      }
    })
  }
  render() {
    return (  // 返回React元素
      <div>
        <button onClick={ this.chanageToggle }>切换状态</button>
        <h1>The Toggle is { this.state.toggleBoolean?'true':'false' }</h1>  
      </div>
    )
  }
}
ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
)

// 4.0 事件处理传递参数
( <button onClick={(e) => {this.deleteRow(id, e)}}>传递参数</button> )
( <button onClick={ this.deleteRow.bind(this, id) }>传递参数</button> )

